var json_modul = '{"chart": {"height": "@height","width": "@width","zoomType": "@zoomType"},"title": {"text": "@title"},"series": {"dataLabels": {"enabled": "@enabled"}},"xAxis": {"title": {"text":"@xtitle"},"labels": {"rotation": "@rotation"},"min": "@xmin","max": "@xmax"},"yAxis": [{"title": {"text": "@y1title"},"min": "@y1min","max": "@y1max"},{"title": {"text": "@y2title"},"min": "@y2min","max": "@y2max","opposite": "true"}],"line": {"origin": "@origin"},"column": {"direction": "@direction"},"pie": {"selected": "@selected"},"doublepie": {"inner": "@inner","outer": "@outer"},"level": {"level": "@level"},"target": {"target": "@target"},"radar": {"reversed": "@reversed"},"gauge": {"threshold": "@threshold","colors": "@colors"}}';

function draw(type,str){
	var mychart;
	var pram = new Function("return" + str)();
	console.log(pram.xAxis.min);
	if("line" == type || "column" == type || "bar" == type || "scatter" == type || "bubble" == type)
	{
		var xdata = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
		var data1 = [7.0, 6.9, 9.5, 4.5, 8.2, 11.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6];
		var data2 = [5.0, 5.9, 6.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
		$(document).ready(function() {
			mychart = new Highcharts.Chart({
				chart: {
					renderTo: 'chart',
					type: type,
					width: "" == pram.chart.width ? null : parseInt(pram.chart.width),
					height: "" == pram.chart.height ? null : parseInt(pram.chart.height),
					zoomType: "'" + pram.chart.zoomType + "'"
				},
				credits: {
					enabled:false
				},
				title: {
					text: '' + pram.title.text
				},
				xAxis: {
					categories: xdata,
					labels: {
						rotation: "" == pram.xAxis.labels.rotation ? null : parseInt(pram.xAxis.labels.rotation)
					},
					title: {
						text: '' + pram.xAxis.title.text
					},
					min: "" == pram.xAxis.min ? 0 : parseInt(pram.xAxis.min),
					max: "" == pram.xAxis.max ? null : parseInt(pram.xAxis.max)
				},
				yAxis: [{
					min: "" == pram.yAxis[0].min ? null : parseInt(pram.yAxis[0].min),
					max: "" == pram.yAxis[0].max ? null : parseInt(pram.yAxis[0].max),
					title: {
						text: '' + pram.yAxis[0].title.text
					}
				},{
					min: "" == pram.yAxis[1].min ? null : parseInt(pram.yAxis[1].min),
					max: "" == pram.yAxis[1].max ? null : parseInt(pram.yAxis[1].max),
					title: {
						text: '' + pram.yAxis[1].title.text
					},
					opposite: true
				}],
				legend: {
					align: 'right',
					verticalAlign: 'top',
					y: 70,
					layout: 'vertical'	// horizontal

				},
				tooltip: {
					formatter: function() {
							return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y +'°C';
					}
				},
				series: [
					{
						name: '北京',
						data: data1,
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true, // 是否显示每个柱的数值
							color: 'black' // 数值的颜色
						}
					},
					{
						name: '南京',
						data: data2,
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true, // 是否显示每个柱的数值
							color: 'black' // 数值的颜色
						}
					}
				],
				lang: {
					printButtonTitle: '打印图表',
					downloadJPEG: '下载jpeg格式图片',
					downloadPDF: '下载成pdf格式',
					downloadPNG: '下载png格式图片',
					downloadSVG: '下载svg格式图片',
					resetZoom: '还原'
				}
			});
		});
	}else if("pie" == type){
		var data = [['Firefox',45.0],['IE',26.8],{name: 'Chrome', y: 12.8, selected: true},['Safari',8.5],['Opera',6.2],['Others',0.7]];
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chart',
					type: 'pie',
					width: "" == pram.chart.width ? null : parseInt(pram.chart.width),
					height: "" == pram.chart.height ? null : parseInt(pram.chart.height)
				},
				credits: {
					enabled:false
				},
				title: {
					text: '' + pram.title.text
				},
				tooltip: {
    				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true, // 是否显示每个柱的数值
							color: '#000000',
							connectorColor: '#000000',
							format: '<b>{point.name}</b>: {point.percentage:.1f} %'
						}
					}
				},
				series: [
					{
						data: [['Firefox',45.0],['IE',26.8],{name: 'Chrome', y: 12.8,sliced: true,selected: true},['Safari',8.5],['Opera',6.2],['Others',0.7]]
					}
				]
			});
		});
	}else if("doublepie" == type){
		var data1 = [['Firefox',45.0],['IE',26.8],{name: 'Chrome', y: 12.8,sliced: true,selected: true},['Safari',8.5],['Opera',6.2],['Others',0.7]];
		var data2 = [['Firefox',34.0],['IE',31.8],{name: 'Chrome', y: 18.8,sliced: true,selected: true},['Safari',8.5],['Opera',6.2],['Others',0.7]];
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chart',
					type: 'pie',
					width: "" == pram.chart.width ? null : parseInt(pram.chart.width),
					height: "" == pram.chart.height ? null : parseInt(pram.chart.height)
				},
				credits: {
					enabled:false
				},
				title: {
					text: '' + pram.title.text
				},
				tooltip: {
    				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true, // 是否显示每个柱的数值
							color: '#000000',
							connectorColor: '#000000',
							format: '<b>{point.name}</b>: {point.percentage:.1f} %'
						}
					}
				},
				series: [
					{
						data: data1,
						size: '50%',
						innerSize: '30%'
					},
					{
						data: data2,
						size: '80%',
						innerSize: '60%'
					}
				]
			});
		});
	}else if("radar" == type) {
		var xdata = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
		var data1 = [7.0, 6.9, 9.5, 4.5, 8.2, 11.5, 15.2, 16.5, 13.3, 18.3, 12.9, 9.6];
		var data2 = [5.0, 3.9, 6.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 19.3, 14.9, 10.6];
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					polar: true,
					renderTo: 'chart',
					type: 'line',
					width: "" == pram.chart.width ? null : parseInt(pram.chart.width),
					height: "" == pram.chart.height ? null : parseInt(pram.chart.height)
				},
				credits: {
					enabled:false
				},
				title: {
					text: '' + pram.title.text,
					x: -35
				},
				pane: {
					size: '80%'
				},
				xAxis: {
					categories: xdata,
					tickmarkPlacement: 'on',
					lineWidth: 0
				},
				yAxis: {
					gridLineInterpolation: 'polygon',
					lineWidth: 0,
					min: 0,
					reversed: "false" == pram.radar.reversed ? false : true // 雷达图刻度方向
				},
				tooltip: {
					shared: true,
					pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}°C</b><br/>'
				},
				legend: {
					align: 'right',
					verticalAlign: 'top',
					y: 70,
					layout: 'vertical'
				},
				plotOptions: {
					line: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true // 是否显示每个柱的数值
						}
					}
				},
				series: [{
					name: '北京',
					data: data1,
					pointPlacement: 'on'
				}, {
					name: '南京',
					data: data2,
					pointPlacement: 'on'
				}]
			});
		});
	}else if("gauge" == type) {
		$(document).ready(function() {
			var plotband = "[";
			var temp = pram.gauge.threshold.split(",");
			var colors = pram.gauge.colors.split(",");
			var threshold = new Array();
			//组装仪表盘个区段值的数组
			threshold.push(pram.yAxis[0].min);
			for (var i=0,len=temp.length;i<len;i++) {
				threshold.push(temp[i]);
			}
			threshold.push(pram.yAxis[0].max);
			//判断阀值与颜色的数量是否符合
			if (colors.length + 1 != threshold.length) {
				alert("阀值数量应比颜色数量少一个");
				return;
			}
			
			for (var i=0,len=colors.length;i<len;i++) {
				if(0 == i) {
					plotband += "{from: " + threshold[0] + ",to: " + threshold[i+1] + ",color: '" + colors[i] + "'}";
				} else {
					plotband += ",";
					plotband += "{from: " + threshold[i] + ",to: " + threshold[i+1] + ",color: '" + colors[i] + "'}"
				}
			}
			plotband +="]"
			var plot = new Function("return" + plotband)();
			
			chart = new Highcharts.Chart({
				chart: {
					type: type,
					renderTo: 'chart',
					plotBackgroundColor: null,
					plotBackgroundImage: null,
					plotBorderWidth: 0,
					plotShadow: false,
					width: "" == pram.chart.width ? null : parseInt(pram.chart.width),
					height: "" == pram.chart.height ? null : parseInt(pram.chart.height)
				},
				credits: {
					enabled:false
				},
				title: {
					text: '' + pram.title.text,
				},
				pane: {
					startAngle: -150,
					endAngle: 150,
					background: [{
						backgroundColor: {
							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
							stops: [
								[0, '#FFF'],
								[1, '#333']
							]
						},
						borderWidth: 0,
						outerRadius: '109%'
					}, {
						backgroundColor: {
							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
							stops: [
								[0, '#333'],
								[1, '#FFF']
							]
						},
						borderWidth: 1,
						outerRadius: '107%'
					}, {
						// default background
					}, {
						backgroundColor: '#DDD',
						borderWidth: 0,
						outerRadius: '105%',
						innerRadius: '103%'
					}]
				},		   
				// the value axis
				yAxis: {
					min: "" == pram.yAxis[0].min ? null : parseInt(pram.yAxis[0].min),
					max: "" == pram.yAxis[0].max ? null : parseInt(pram.yAxis[0].max),
					minorTickInterval: 'auto',
					minorTickWidth: 1,
					minorTickLength: 10,
					minorTickPosition: 'inside',
					minorTickColor: '#666',
					tickPixelInterval: 30,
					tickWidth: 2,
					tickPosition: 'inside',
					tickLength: 10,
					tickColor: '#666',
					labels: {
						step: 2,
						rotation: 'auto'
					},
					title: {
						text: '°C'
					},
					plotBands: plot
				},
				plotOptions: {
					gauge: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true // 是否显示每个柱的数值
						}
					}
				},
				series: [{
					name: '南京',
					data: [27],
					tooltip: {
						valueSuffix: '°C'
					}
				}]
			});
		});
	}else if("level" == type) {
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chart',
					showAxes: false,
					width: "" == pram.chart.width ? 200 : parseInt(pram.chart.width),
					height: "" == pram.chart.height ? 400 : parseInt(pram.chart.height),
					margin: 50,
					plotBackgroundColor: '#ff0066'
				},
				credits: {
					enabled:false
				},
				title: {
					text: '' + pram.title.text
				},
				xAxis: {	   
					categories: ['销售完成情况'],
					lineWidth: 0,
					gridLineWidth: 0,
					labels: {
						enabled: false
					}
				},
				yAxis: {
					min: "" == pram.yAxis[0].min ? null : parseInt(pram.yAxis[0].min),
					max: "" == pram.yAxis[0].max ? null : parseInt(pram.yAxis[0].max),
					title: {
						enabled: false
					},
					gridLineWidth: 0,
					labels: {
						enabled: true
					},
					plotLines: [{
						value: ""　==　pram.level.level ? null : parseInt(pram.level.level),
						color: '#0099ff',
						width: 6,
						label: {
							text: "目标：" + ((""　==　pram.level.level) ? "" : parseInt(pram.level.level)),
							align: 'center',
							y: -10
						}
					}]
				},
				legend:{
					enabled:true
				},
				tooltip: {
					enabled:false
				},
				series: [
					{
						name: '完成值',
						data: [157],
						color: '#00ff33',
						type: 'column'
					}
				],
				plotOptions: {  
					column:{
						pointWidth: "" == pram.chart.width ? 200 : parseInt(pram.chart.width),
						borderWidth: 0,
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true, // 是否显示每个柱的数值
							color: 'black' // 数值的颜色
						}
					}
				}
			});
		});
	}else if("target" == type) {
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chart',
					showAxes: false,
					width: "" == pram.chart.width ? 400 : parseInt(pram.chart.width),
					height: "" == pram.chart.height ? 200 : parseInt(pram.chart.height),
					margin: 50,
					plotBackgroundColor: '#ff0066'
				},
				credits: {
					enabled:false
				},
				title: {
					text: '' + pram.title.text
				},
				xAxis: {	   
					categories: ['销售完成情况'],
					lineWidth: 0,
					gridLineWidth: 0,
					labels: {
						enabled: false
					}
				},
				yAxis: {
					min: "" == pram.yAxis[0].min ? null : parseInt(pram.yAxis[0].min),
					max: "" == pram.yAxis[0].max ? null : parseInt(pram.yAxis[0].max),
					title: {
						enabled: false
					},
					gridLineWidth: 0,
					labels: {
						enabled: true
					},
					plotLines: [{
						value: ""　==　pram.target.target ? null : parseInt(pram.target.target),
						color: '#0099ff',
						width: 6,
						label: {
							text: "目标：" + ((""　==　pram.target.target) ? "" : parseInt(pram.target.target)),
							align: 'middle',
							x: 10
						}
					}]
				},
				legend:{
					enabled:true
				},
				tooltip: {
					enabled:false
				},
				series: [
					{
						name: '完成值',
						data: [157],
						color: '#00ff33',
						type: 'bar'
					}
				],
				plotOptions: {  
					bar:{
						pointWidth: "" == pram.chart.width ? 400 : parseInt(pram.chart.width),
						borderWidth: 0,
						dataLabels: {
							enabled: "false" == pram.series.dataLabels.enabled ? false : true, // 是否显示每个柱的数值
							color: 'black' // 数值的颜色
						}
					}
				}
			});
		});
	}
}

function prepare(type){
	var str = json_modul;

	if ($("#title_"+type).length > 0) {
		str = str.replace("@title",$("#title_"+type).attr("value"));
	}

	if ($("#height_"+type).length > 0) {
		str = str.replace("@height",$("#height_"+type).attr("value"));
	}

	if ($("#width_"+type).length > 0) {
		str = str.replace("@width",$("#width_"+type).attr("value"));
	}

	if ($("#showdata_"+type).length > 0) {
		str = str.replace("@enabled",null == $('input[name="showdata_'+type+'"]:checked').val() ? false : $('input[name="showdata_'+type+'"]:checked').val());
	}

	if ($("#xtitle_"+type).length > 0) {
		str = str.replace("@xtitle",$("#xtitle_"+type).attr("value"));
	} else {
		str = str.replace("@xtitle","");
	}

	if ($("#xmin_"+type).length > 0) {
		str = str.replace("@xmin",$("#xmin_"+type).attr("value"));
	} else {
		str = str.replace("@xmin","");
	}

	if ($("#xmax_"+type).length > 0) {
		str = str.replace("@xmax",$("#xmax_"+type).attr("value"));
	} else {
		str = str.replace("@xmax","");
	}

	if ($("#y1title_"+type).length > 0) {
		str = str.replace("@y1title",$("#y1title_"+type).attr("value"));
	} else {
		str = str.replace("@y1title","");
	}

	if ($("#y1min_"+type).length > 0) {
		str = str.replace("@y1min",$("#y1min_"+type).attr("value"));
	} else {
		str = str.replace("@y1min","");
	}

	if ($("#y1max_"+type).length > 0) {
		str = str.replace("@y1max",$("#y1max_"+type).attr("value"));
	} else {
		str = str.replace("@y1max","");
	}
	
	if ($("#y2title_"+type).length > 0) {
		str = str.replace("@y2title",$("#y2title_"+type).attr("value"));
	} else {
		str = str.replace("@y2title","");
	}

	if ($("#y2min_"+type).length > 0) {
		str = str.replace("@y2min",$("#y2min_"+type).attr("value"));
	} else {
		str = str.replace("@y2min","");
	}

	if ($("#y2max_"+type).length > 0) {
		str = str.replace("@y2max",$("#y2max_"+type).attr("value"));
	} else {
		str = str.replace("@y2max","");
	}

	if ($("#origin_"+type).length > 0) {
		str = str.replace("@origin",null == $('input[name="origin_'+type+'"]:checked').val() ? false : $('input[name="origin_'+type+'"]:checked').val());
	}

	if ( $("#rotation_"+type).length > 0 ) {
		str = str.replace("@rotation",$("#rotation_"+type).attr("value"));
	} else {
		str = str.replace("@rotation","");
	}

	if ($("#zoom_"+type).length > 0) {
		str = str.replace("@zoomType", null == $('input[name="zoom_'+type+'"]:checked').val() ? "" : $('input[name="zoom_'+type+'"]:checked').val());
	}
	
	if ($("#direction_"+type).length > 0) {
		str = str.replace("@direction", null == $('input[name="direction_'+type+'"]:checked').val() ? "" : $('input[name="direction_'+type+'"]:checked').val());
		type = $('input[name="direction_'+type+'"]:checked').val();
	} else {
		str = str.replace("@direction", "");
	}
	
	if ($("#select_series_"+type).length > 0) {
		str = str.replace("@selected",$("#select_series_"+type).attr("value"));
	}
	
	if ($("#target_"+type).length > 0) {
		str = str.replace("@"+type,$("#target_"+type).attr("value"));
	}
	
	if ($("#reversed_"+type).length > 0) {
		str = str.replace("@reversed", null == $('input[name="reversed_'+type+'"]:checked').val() ? "" : $('input[name="reversed_'+type+'"]:checked').val());
	}
	
	if ($("#threshold_"+type).length > 0) {
		str = str.replace("@threshold",$("#threshold_"+type).attr("value"));
	}
	
	if ($("#colors_"+type).length > 0) {
		str = str.replace("@colors",$("#colors_"+type).attr("value"));
	}
	
	draw(type,str);
}

function clear_pic(){
	$("#chart").html("");
}

function clearNoNum(obj)
{
    //把非数字的都替换掉，除了数字和.
    obj.value = obj.value.replace(/[^\d.]/g,"");
    //必须保证第一个为数字而不是.
    obj.value = obj.value.replace(/^\./g,"");
    //保证只有出现一个.而没有多个.
    obj.value = obj.value.replace(/\.{2,}/g,".");
    //保证.只出现一次，而不能出现两次以上
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
}